'use client'
import './index.scss'
import React, { useState, useEffect } from "react"
import { Button, Collapse, Drawer, Input, Modal, message } from 'antd'
import { RadiusUpleftOutlined, DeleteOutlined, EditOutlined } from '@ant-design/icons';
import keyStore from '@/app/store/key'
import { DeleteSegments, UpdataSegments } from '@/app/api/index'
import { DeleteChunk, EditChunk } from '@/app/api/RAGflow/index'
import Markdown from '@/app/components/MarkDown/page';
const { TextArea } = Input;

interface ChunkItemProps {
    data: any,
    chunklist: any;
    setDate: (value: boolean) => void;
    readonly: Boolean
}

const ChunkItem: React.FC<ChunkItemProps> = ({ data, setDate, chunklist, readonly }) => {

    const [active, setactive] = useState(1)
    const [open, setOpen] = useState(false);
    const [value, setValue] = useState('');
    const [isModalOpen, setIsModalOpen] = useState(false);

    // 分段id
    const [segmentid, setsegmentid] = useState('')

    const { RAGFlowKey } = keyStore()
    useEffect(() => {
    }, [chunklist])

    const update = () => {
        const obj = {
            content: value,
            important_keywords: []
        }
        EditChunk(data.dataset_id, data.id, segmentid, obj, RAGFlowKey).then((res: any) => {
            if (res.code == 0) {
                message.success('修改成功')
            } else {
                message.error(res.message)
            }
            setTimeout(() => {
                setDate(true)
            }, 1000);
        })
        setOpen(false)
    }


    return (
        <div className="chunkitem">
            <div className='chunk_content'>
                {chunklist.map((item: any, index: number) => {
                    return <div key={item.id} className='chunk_content_item'
                        onMouseEnter={() => { setactive(index) }}
                        onMouseLeave={() => { setactive(-1) }}
                    >
                        {active === index && !readonly && <div className='tool'>
                            <EditOutlined style={{ color: '#676f82' }} onClick={() => {
                                setValue(item.content)
                                setOpen(true)
                                setsegmentid(item.id)
                            }} />
                            <DeleteOutlined style={{ color: '#d72d20' }} onClick={() => {
                                setIsModalOpen(true)
                                setsegmentid(item.id)
                            }} />
                        </div>}
                        <div className='chunk_content_item_title'>
                            <RadiusUpleftOutlined /> 分段
                        </div>
                        <Markdown content={item.content} />

                    </div>
                })}
                <Drawer onClose={() => { setOpen(false) }} open={open} width={500} extra={null} mask={false} closeIcon={null}>
                    <p style={{ fontSize: '17px', fontWeight: '600', marginTop: '5px', marginBottom: '5px' }}>
                        编辑分段
                    </p>
                    <TextArea
                        value={value}
                        onChange={(e: any) => setValue(e.target.value)}
                        autoSize={{ minRows: 30, maxRows: 30 }}
                    />
                    <div className='footer'>
                        <Button type="primary" onClick={() => { setOpen(false); update() }}>保存</Button>
                    </div>
                </Drawer>

                <Modal title="删除这个分段？" open={isModalOpen} onCancel={() => { setIsModalOpen(false) }} closeIcon={null} footer={[
                    <>
                        <Button onClick={() => { setIsModalOpen(false) }}>取消</Button>
                        <Button type="primary" danger onClick={() => {
                            DeleteChunk(data.dataset_id, data.id, [segmentid], RAGFlowKey).then((res: any) => {
                                console.log(res, '删除分段');
                                if (res.code == 0) {
                                    message.success('删除成功')
                                } else {
                                    message.error(res.message)
                                }
                                setDate(true)
                            })
                            setIsModalOpen(false)
                        }}>删除</Button>
                    </>
                ]}>
                    <p>删除后无法恢复</p>
                </Modal>
            </div>

        </div >
    )
}

export default ChunkItem